import React, { useState, useEffect } from 'react';
import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { VirtualScrollDebug as VirtualScroll } from '../../components/VirtualScrollDebug';
import './index.less';

// 简单的测试数据
interface TestItem {
  id: string;
  title: string;
  content: string;
  height: number;
}

export default function TestPage() {
  const [items, setItems] = useState<TestItem[]>([]);

  // 生成测试数据
  const generateItems = (count: number): TestItem[] => {
    return Array.from({ length: count }, (_, index) => ({
      id: `test-${index}`,
      title: `测试项目 ${index + 1}`,
      content: `这是第 ${index + 1} 个测试项目的内容。`.repeat(Math.floor(Math.random() * 5) + 1),
      height: 80 + Math.floor(Math.random() * 100),
    }));
  };

  // 初始化数据
  useEffect(() => {
    setItems(generateItems(50));
  }, []);

  // 获取项目ID
  const getItemId = (item: TestItem) => item.id;

  // 计算项目高度
  const calculateHeight = (item: TestItem) => item.height;

  // 渲染列表项
  const renderItem = (item: TestItem) => (
    <View className="test-item">
      <Text className="test-title">{item.title}</Text>
      <Text className="test-content">{item.content}</Text>
      <Button
        className="test-button"
        size="mini"
        type="primary"
        onClick={() => Taro.showToast({ title: `点击了 ${item.title}` })}
      >
        测试按钮
      </Button>
    </View>
  );

  // 处理滚动事件
  const handleScroll = (scrollTop: number) => {
    console.log('滚动位置:', scrollTop);
  };

  // 处理可见项目变化
  const handleVisibleItemsChange = (visibleItems: any[]) => {
    console.log('可见项目数量:', visibleItems.length);
  };

  return (
    <View className="test-page">
      <View className="test-header">
        <Text className="test-title">虚拟滚动测试</Text>
        <Text className="test-subtitle">简单列表测试</Text>
      </View>

      <View className="test-container">
        <VirtualScroll
          items={items}
          height={500}
          estimatedItemHeight={100}
          overscan={3}
          waterfall={false}
          getItemId={getItemId}
          renderItem={renderItem}
          calculateHeight={calculateHeight}
          onScroll={handleScroll}
          onVisibleItemsChange={handleVisibleItemsChange}
          className="test-virtual-scroll"
        />
      </View>

      <View className="test-footer">
        <Text className="test-count">共 {items.length} 个测试项目</Text>
      </View>
    </View>
  );
}
